<template>
  <div class="ele-body" v-loading="loading">
    <el-card shadow="none">
      <template>
        <div class="top">
          <div class="bottom">
            {{info.name}}
          </div>
          <div class="closeWork" v-show="tabsActive==='jhxq'">
            <!--            <el-button type="primary" @click="toReceipt" :loading="loading">填写回单</el-button>-->
            <el-button  type="primary" @click="edit">{{editVisible?'保存':'编辑'}}</el-button>
            <el-button  type="primary" @click="dispatchWork('')">返回</el-button>
          </div>
        </div>
      </template>
    </el-card>

    <!-- 工单信息 -->
    <div class="info-content">
      <el-card class="right" shadow="never">
        <el-tabs v-model="tabsActive">
          <el-tab-pane label="计划详情" name="jhxq">
            <el-card>
            <editForm ref="editForm" :info="this.info" :editVisible="editVisible"></editForm>
            </el-card>
          </el-tab-pane>
          <el-tab-pane label="计划日志" name="hzxx">
            <planLogs :id="this.id"></planLogs>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
  </div>
</template>

<script>
import editForm from '../compoments/editForm.vue'
// import { removePageTab } from '@/utils/page-tab-util'
import {mapGetters} from "vuex";
import planLogs from "@/views/inspection/plan/compoments/planLogs.vue";


export default {
  components: {
    editForm,
    planLogs
  },
  data() {
    return {
      closeLoading: false,
      editVisible: false,
      visible: false,
      loading: false,
      id: null,
      tabsActive: "jhxq",
      info: {},
      logs: [],
      //审核信息
      auditInfo: {},
      //回访信息
      returnInfo: {},
      //回执信息
      receiptInfo: {},
    }
  },
  computed: {
    ...mapGetters(["permission"]),
  },
  mounted() {
    this.getInfo();
  },
  created() {
    this.id = this.$route.query.id;
  },
  methods: {
    async edit  (){
      this.editVisible = !this.editVisible;
      if(!this.editVisible){
        if(this.$refs.editForm.onSubmit()){
          this.loading = true
           await this.$http.put(`/polling_plan/${this.id}`,this.$refs.editForm.form).then(res => {
            if (res.data.code === 0) {
              this.$message.success(res.data.msg);
              this.info = res.data.data;
              this.logs = res.data.data.logs;
              this.$forceUpdate()
              this.loading = false
            } else {
              this.$message.error(res.data.msg);
            }
          }).catch(e => {
            this.loading = false
            this.$message.error(e.message);
          });
        }
        this.loading = false
        }
      console.log(this.editVisible,2)
    },
    //取消
    cancel() {
      this.returnVisible = false
      this.visible = false
    },
    //完成
    done(id) {
      if (id) {
        this.id = id
      }
      this.returnVisible = false
      this.visible = false
      this.getInfo();
      // removePageTab('/workTickets/workTickets/info')
    },
    //指派工单
    dispatchWork(transfer) {
      this.$router.push({path: '/workTickets/pick-upsList', query: {id: this.id, transfer: transfer}})
    },
    // 获取详情
    getInfo() {
      this.loading = true
      this.$http.get(`/polling_plan/${this.id}`).then(res => {
        if (res.data.code === 0) {
          this.info = res.data.data;
          this.logs = res.data.data.logs;
          this.$forceUpdate()
          this.loading = false
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        this.loading = false
        this.$message.error(e.message);
      });
    }
  }
}
</script>

<style lang="scss" scoped>


.work_info {
  width: 96%;
  margin: 50px auto 0;
}


.top {
  height: 30px;
  display: flex;
  align-items: center;
  //margin-bottom: 10px;
  justify-content: space-between;
}

.bottom {
  display: flex;
  height: 100%;
  align-items:center;
}


.info-content {
  //height: calc(100vh - 300px);
  box-sizing: border-box;
  margin-top: 15px;
  display: flex;
  justify-content: space-between;

  .el-card + .el-card {
    margin-top: 0;
  }

  .content-left {
    box-sizing: border-box;
    overflow: auto;
  }

  .right {
    flex: 1;
    overflow: auto;
  }
}
</style>

